<template>
  <div id="map" style="width: 100%; height: 500px;">
    <el-button>
      测试按钮
    </el-button>
  </div>
</template>

<script>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from "ol/proj";
import {XYZ} from "ol/source";
export default {
  name: 'OpenLayersMap',
  mounted() {
    const map = new Map({
      target:'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            wrapX: false,
          })
        })
      ],
      view: new View({
        center: [114.305469, 30.59375] ,
        projection: "EPSG:4326",
        zoom: 8
      })
    });
  }
};

</script>



<style scoped lang="scss">

</style>
